<template>
  <Poptip
    :transfer="true"
    popper-class="order-poptip-wrap"
    width="400"
    @on-popper-show="showPopper(id)">
    <span class="poptxt">{{ money }}</span>
    <div class="pop-content" slot="content">
      <Table
        ref="recordTable"
        border
        :data="recordData"
        :columns="recordColumns"
        :loading="recordLoading"></Table>
    </div>
  </Poptip>
</template>

<script>
  const COMPONENT_NAME = 'record-poptip';
  export default {
    name: COMPONENT_NAME,
    props: {
      id: Number,
      money: Number
    },
    data() {
      return {
        recordData: [],
        recordColumns: [
          {
            title: '还款时间',
            key: 'confirmTime',
            align: 'center'
          },
          {
            title: '还款金额',
            key: 'money',
            align: 'center'
          },
          {
            title: '还款状态',
            key: 'state',
            align: 'center',
            render: (h, params) => {
              const { state, returnDesc } = params.row;
              let txtColor, txt;

              if (state == 0) {
                txtColor = '#19be6b';
                txt = '处理中';
              } else if (state == 1) {
                txtColor = '#515a6e';
                txt = '成功';
              } else {
                txtColor = '#ed4014';
                txt = `失败【${returnDesc}】`;
              }

              return h('span', {
                style: {
                  color: txtColor
                }
              }, txt);
            }
          }
        ],
        recordLoading: true
      }
    },
    methods: {
      showPopper(id) {
        this.recordLoading = true;
        this.$http.post('/helsinki/admin/order/repay-record', {
          orderId: id
        }).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.recordData = data;
          }
          this.recordLoading = false;
        }, error => {});
      },
    }
  }
</script>

<style lang="scss" scoped>
  
</style>
